iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
自我挑戰組

DevOps的下克上之旅( ° ∀ ° )ノ゙系列 第 14

Day 14: DockerFile實作Node前後端 (下)

  • 分享至 

  • xImage
  •  

Node前端

今天來講Vue前端的與postgres包入進docker,和後端編譯後直接放入相比,前端多了一個轉dist的過程,也就是npm build,Vue的prodcution步驟詳細如下:

  1. 程式寫完
  2. npm build build成一個dist檔
  3. dist檔放入web server,例如nginx、apache

因此dockerfile需要兩個環境,步驟2需要node環境,而步驟3則需要webserver環境,有什麼辦法能夠堆疊這兩個環境呢?有的,就是multi-stage builds

Multi-stage build

在multi-stage build中,每一個FROM都是一個基礎的base,並且每一個都會是一個新的stage互不干擾,你可以透過COPY的方式將上個stage的產出結果COPY到下個stage,如以下範例,我們需要產出兩個stage分別是node與web server:

FROM node:latest as build-stage
WORKDIR /usr/src/app
COPY . .
RUN npm install && npm run build

FROM httpd:2.4 as production-stage
COPY --from=build-stage /usr/src/app/dist /usr/local/apache2/htdocs/
EXPOSE 80
CMD ["httpd-foreground"]

如上build-stage會build檔案,然後produciton-stage會將build-stage的結果copy過來,build-stage會自動刪除,節省最終image大小

  • docker build -t myweb:latest .
  • docker run -d -p 8085:80 --name run_myweb --network itban_network myweb:latest

成功執行:
https://ithelp.ithome.com.tw/upload/images/20210919/201190446pwzjbEJMR.png

Postgres資料庫

資料庫的部分其實更常是跟著docker-compose一起使用,但是我這裡來講一下單獨建立與進入postgres的方法,postgres資料庫有許多重要參數:

建立:

  • docker volume create pgdata
  • docker run -d --name my_postgres --network itban_network -e POSTGRES_PASSWORD=password -e PGDATA=/var/lib/postgresql/data/pgdata -v pdata:/var/lib/postgresql/data -p 5432:5432 postgres

Postgres docker可以設定許多參數,詳細可以參考這裡,其中POSTGRES_PASSWORD是必填的,此外資料庫內容會保存在/var/lib/postgresql/data中,默認對外開啟5432 port。

進入:

  • docker exec -it -u postgres my_postgres bash

-u指定自己的身分為postgres進入my_postgres,接著執行psql就能開始使用了

  • psql

成功進入:
https://ithelp.ithome.com.tw/upload/images/20210919/201190443ZzNyY1WRv.png

參照Gihub,我幫你把環境變數寫好了,最終可以得到:

https://ithelp.ithome.com.tw/upload/images/20210926/20119044jM5iXq1kjA.png

Table是從資料庫裡面撈出來的。


上一篇
Day13: DockerFile實作Node前後端(上)
下一篇
Day 15: Docker-compose建立Web專案
系列文
DevOps的下克上之旅( ° ∀ ° )ノ゙30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言